<!-- 支付密码输入框 -->
<template>
	<view class="vk-data-input-keyboard-pay">
	<!-- 页面开始 -->
		<u-keyboard
			:value="valueCom"
			:modelValue="valueCom"
			mode="number" 
			:mask="true" 
			:mask-close-able="maskCloseAble"
			:dot-enabled="false" 
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@input="onInput"
			@change="onChange"
			@backspace="onBackspace"
		>
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{ moneyCom }}</text>
					<text class="u-font-20 u-padding-left-10">{{ moneyType }}</text>
					<view class="u-padding-10 close" data-flag="false" @click="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						v-model="password"
						mode="box" 
						:maxlength="maxlength"
						:dot-fill="true"
						:disabled-keyboard="true"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">{{ tips }}</view>
			</view>
		</u-keyboard>
	<!-- 页面结束 -->
	</view>
</template>

<script>
	export default {
		name: 'vk-data-input-keyboard-pay',
		emits: ["update:modelValue", "input","success"],
		props: {
			// 表单值
			value:{
				type: Boolean,
				default: false
			},
			modelValue: {
				type: Boolean,
				default: false
			},
			// 提示
			placeholder:{
				Type:String,
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭键盘
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			maxlength: {
				type: Number,
				default: 6
			},
			money: {
				type: [Number,String],
				default: 0
			},
			moneyType: {
				type: String,
				default: "元"
			},
			tips:{
				type: String,
				default: "支付键盘"
			},
			notConvert: {
				type: Boolean,
				default: false
			},
			
		},
		data: function() {
			// 组件创建时,进行数据初始化
			return {
				password:""
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init(){

			},
			// 向父组件发送更新value事件
			_successValue(value){
				this.$emit("success",value);
			},
			onInput(value){
				this.$emit("input", value);
				this.$emit("update:modelValue", value);
			},
			// 按键被点击(点击退格键不会触发此事件)
			onChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				let that = this;
				let { password:value } = that;
				value += val;
				let n1 = value.length;
				value = that.getValue(value);
				let n2 = value.length;
				that.password = value;
				if(value.toString().length >= that.maxlength || (n2 - n1 == 1)){
					that._successValue(value);
				}
				that.vibrateShort();
			},
			// 退格键被点击
			onBackspace() {
				let that = this;
				// 删除value的最后一个字符
				let { password:value } = that;
				if(value.length) value = value.substr(0, value.length - 1);
				that.password = value;
				that.vibrateShort();
			},
			vibrateShort() {
				// #ifdef MP-WEIXIN
				uni.vibrateShort();
				// #endif
			},
			getValue(value){
				let that = this;
				let { maxlength } = that;
				if(maxlength != undefined){
					if(value.toString().length > maxlength){
						value = value.substring(0, maxlength);
					}
				}
				return value;
			},
			showPop(flag = true){
				let that = this;
				that.password = "";
				that.onInput(flag);
			},
			closePop(){
				let that = this;
				that.onInput(false);
			},
			// 监听 - 键盘显示事件
			openEvent(){
				let that = this;
				that.password = "";
			},
			// 监听 - 键盘关闭事件
			closeEvent(){
				
			}

		},
		watch : {
			valueCom: {
				immediate: true,
				handler(nVal, oVal) {
					let that = this;
					if (nVal) {
						that.openEvent();
					} else {
						that.closeEvent();
					}
				}
			}
		},
		// 计算属性
		computed: {
			valueCom(){
				// #ifndef VUE3
				return this.value;
				// #endif
				
				// #ifdef VUE3
				return this.modelValue;
				// #endif
			},
			moneyCom(){
				let that = this;
				let { money, vk, notConvert } = that;
				if(!money) money = 0;
				if(notConvert){
					return money.toFixed(2);
				}else{
					return vk.pubfn.priceFilter(money);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.vk-data-input-keyboard-pay {
		position: relative;
		-webkit-box-flex: 1;
		padding: 0px;
		border-color: rgb(220, 223, 230);
		text-align: left;
		width: 100%;
		.money{
			font-size: 80rpx;
			color: #ff4444;
			position: relative;
			.close{
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				line-height: 28rpx;
				font-size: 28rpx;
			}
		}
		.tips{
			color:#909399;
		}
	}
</style>
